import { Component, OnInit } from '@angular/core';

@Component({
    selector: "overview-power-detail",
    styleUrls: ["./power-detail.less"],
    template: `
        <div>
            <nz-tabset>
                <nz-tab nzTitle='按站点'>
                    <div class="power-detail-echart" echarts [options]="option1"></div>
                </nz-tab>
                <nz-tab nzTitle='按时间'>
                    <div class="power-detail-echart" echarts [options]="option1"></div>
                </nz-tab>
            </nz-tabset>
        </div>
    `
})

export class PowerDetailComponent implements OnInit {
    option1 = {
        title: {
            text: '能量统计',
            top: '10px',
            textStyle: {
                color: '#f0f0f2'
            }
        },
        
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['牵引能耗', '配电能耗', '再生能馈'],
            bottom: '6%',
            textStyle: {
                color: '#fff'
            }
        },
        grid: [
            {
                left: '3%',
                right: '4%',
                height:'24%',
                top:'6%',
                containLabel: true
            },
            {
                left: '3%',
                right: '4%',
                height:'24%',
                top:'36%',
                containLabel: true
            }, {
                left: '3%',
                right: '4%',
                height:'24%',
                top:'66%',
                containLabel: true
            }
        ],
        xAxis: [
            {
                data: ['2021-01-01', '2021-01-02', '2021-01-03', '2021-01-04', '2021-01-05', '2021-01-06', '2021-01-07'],
                boundaryGap: false,
                gridIndex: 0
            },
            {
                data: ['2021-01-01', '2021-01-02', '2021-01-03', '2021-01-04', '2021-01-05', '2021-01-06', '2021-01-07'],
                boundaryGap: false,
                gridIndex: 1
            }, {
                data: ['2021-01-01', '2021-01-02', '2021-01-03', '2021-01-04', '2021-01-05', '2021-01-06', '2021-01-07'],
                boundaryGap: false,
                gridIndex: 2
            }
        ],
        yAxis: [
            {
                type: 'value',
                show: true,
                axisTick: {
                    show: true
                },
                axisLine: {
                    show: true
                },
                gridIndex: 0
            },
            {
                type: 'value',
                show: true,
                axisTick: {
                    show: true
                },
                axisLine: {
                    show: true
                },
                gridIndex: 1
            },
            {
                type: 'value',
                show: true,
                axisTick: {
                    show: true
                },
                axisLine: {
                    show: true
                },
                gridIndex: 2
            }
        ],
        series: [
            {
                name: '牵引能耗',
                type: 'line',
                lineStyle:{
                    color:'#97343a'
                },
                itemStyle:{
                    color:'#97343a',
            
                },
                areaStyle: {
                    color: '#97343a'
                },
                emphasis: {
                    focus: 'series'
                },
                data: [120, 132, 101, 134, 90, 230, 210],
                xAxisIndex: 2,
                yAxisIndex: 2,
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'}
                    ]
                }
            },
            {
                name: '配电能耗',
                type: 'line',
                lineStyle:{
                    color:'#304054'
                },
                itemStyle:{
                    color:'#304054'
                },
                areaStyle: {
                    color: '#304054'
                },
                emphasis: {
                    focus: 'series'
                },
                data: [220, 182, 191, 234, 290, 330, 310],
                xAxisIndex: 1,
                yAxisIndex: 1,
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'}
                    ]
                }
            },
            {
                name: '再生能馈',
                type: 'line',
                lineStyle:{
                    color:'#5d97a1'
                },
                itemStyle:{
                    color:'#5d97a1'
                },
                areaStyle: {
                    color: '#5d97a1'
                },
                emphasis: {
                    focus: 'series'
                },
                data: [3, 4, 12, 20, 19, 8, 15],
                xAxisIndex: 0,
                yAxisIndex: 0,
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                    ]
                }
            }
        ]
    }


    ngOnInit(): void {

    }
}